import ThemeBtn from '@/components/antd-comp/theme-btn'
import { Button } from 'antd'
// import { Step, TooltipRenderProps } from 'react-joyride'

const joyrideLocale = {
  back: '上一步',
  next: '下一步',
  skip: '跳过',
  close: '下一步',
  last: '完成'
}
const menuJrSteps = [
  {
    target: '#callWordNavLink',
    placement: 'right',
    title: '提示词',
    disableBeacon: true,
    locale: joyrideLocale,
    content: (
      <>
        {/* <div className="guide-title">引导模型关注输入数据中的关键信息</div> */}
        <div className="guide-content">
          本功能模块主要实现提示词的配置和管理，以及对提示词模板进行优化，以便获得更符合期望的大模型推理结果。
        </div>
      </>
    )
  },
  {
    target: '#knowledgeNavLink',
    placement: 'right',
    title: '知识库',
    disableBeacon: true,
    locale: joyrideLocale,
    content: (
      <>
        <div className="guide-content">
          本模块名为知识库，通过上传各种文件，并对文件内容进行处理后，形成用于agent平台的知识库
        </div>
      </>
    )
  },
  {
    target: '#pluginNavLink',
    placement: 'right',
    title: '插件',
    disableBeacon: true,
    locale: joyrideLocale,
    content: (
      <>
        <div className="guide-content">
          本功能模块是为了满足企业场景下业务部门人员以零代码、低门槛地创建自己的大模型智能体的需求而设计的。插件功能模块类似于OpenAI
          GPTs，通过提供插件创建、发布、管理等功能，帮助用户快速创建自定义插件，并在智能体中使用。
        </div>
      </>
    )
  },
  {
    target: '#applicationNavLink',
    placement: 'right',
    title: '智能体',
    disableBeacon: true,
    locale: joyrideLocale,
    content: (
      <>
        <div className="guide-content">
          本功能是智能体，旨在帮助用户创建智能体智能体，通过组合提示词、插件、知识库等模块提供的能力，生成具备特定能力的智能体智能体。
        </div>
      </>
    )
  },
  {
    target: '#chatNavLink',
    title: '会话',
    placement: 'right',
    disableBeacon: true,
    locale: joyrideLocale,
    content: (
      <>
        {/* <div className="guide-title">会话模块说明</div> */}
        <div className="guide-content">------------------------------------------------------</div>
      </>
    )
  }
]

function joyrideCustomTooltip(props) {
  const { backProps, closeProps, isLastStep, index, primaryProps, skipProps, step, tooltipProps } = props
  console.log(props)

  return (
    <div className="max-w-[560px] rounded-[6px] bg-[#ffffff]" {...tooltipProps}>
      <div className="p-[16px]">
        {step.title && (
          <span className="tooltip__title mx-[8px] text-[16px] font-semibold leading-[22px] text-black">
            {step.title}
          </span>
        )}
        <div className="mx-[8px] my-[8px]">{step.content}</div>
        <div className="tooltip__footer flex w-[100%] justify-end">
          {index > 0 && (
            <Button className="mr-[8px] w-[80px]" shape="round" {...backProps}>
              {backProps.title}
            </Button>
          )}
          {!isLastStep && (
            <Button className="mr-[8px] w-[80px]" shape="round" {...skipProps}>
              {skipProps.title}
            </Button>
          )}
          {isLastStep ? (
            <ThemeBtn className="mr-[8px] w-[80px]" htmlType="submit" {...closeProps}>
              关闭
            </ThemeBtn>
          ) : (
            <ThemeBtn className="mr-[8px] w-[80px]" htmlType="submit" {...primaryProps}>
              {primaryProps.title}
            </ThemeBtn>
          )}
        </div>
      </div>
    </div>
  )
}

export { joyrideCustomTooltip, joyrideLocale, menuJrSteps }
